import React, { Component } from 'react'
import { Button, Col, Form, Input, Row, Select, message } from 'antd'
import { CloudUploadOutlined } from '@ant-design/icons';
// 引入编辑器组件
import BraftEditor from 'braft-editor'
// 引入编辑器样式
import 'braft-editor/dist/index.css'

import './blog_publish.less'
import PublishTop from './publish_top'
import { getMemberInfo } from '../../../utils/auth'
import blogApi from '../../../api/blog'
import categoryApi from '../../../api/category.js'
import { withRouter } from 'react-router-dom';
class BlogPublish extends Component {

  state = {
    categoryList: [],
    // 创建一个空的editorState作为初始值
    editorState: BraftEditor.createEditorState(null),
    textValue: "",
  }
  componentDidMount() {
    window.scrollTo(0, 0)
    this.getCategoryList()
  }
  getCategoryList = () => {
    categoryApi.list().then(res => {
      if (res.success) {
        this.setState({
          categoryList: res.data.data
        })
      } else {
        return message.error(res.msg)
      }
    }).catch(err => {
      console.log(err);
    })
  }
  handleEditorChange = (editorState) => {
    this.setState({ editorState })
  }

  publishBlog = (data) => {
    const htmlContent = this.state.editorState.toHTML()
    let jsonData = {
      title: data.title,
      description: data.description,
      content: htmlContent,
      categoryId: data.categoryId,
      memberId: getMemberInfo().id
    }
    blogApi.publish(jsonData).then(res => {
      if (res.success) {
        message.success("发布文章成功")
        this.props.history.go(-1)
      } else {
        return message.error(res.msg)
      }
    })
  }
  render() {
    const { editorState, categoryList } = this.state
    return (
      <div className="blog-publish-container">
        <Form onFinish={this.publishBlog} onFinishFailed={this.onFinishFailed}>
          <PublishTop>
            <Button htmlType="submit" type="primary" icon={<CloudUploadOutlined />}>发布文章</Button>
          </PublishTop>
          <div className="content">
            <div className="my-form">
              <Row gutter={16}>
                <Col span={18}>
                  <Form.Item
                    name="title"
                    rules={[{ required: true, message: '文章标题不能为空' }]}
                  >
                    <Input placeholder="请填写文章标题" />
                  </Form.Item>
                </Col>
                <Col span={6}>
                  <Form.Item
                    name="categoryId"
                    rules={[{ required: true, message: '文章类型不能为空' }]}
                  >
                    <Select placeholder="请选择文章类型">
                      <Select.Option value="">-请选择-</Select.Option>

                      {
                        categoryList.map(item => {
                          return <Select.Option key={item.id} value={item.id}>{item.title}</Select.Option>
                        })
                      }
                    </Select>
                  </Form.Item>
                </Col>
              </Row>
              <Form.Item
                name="description"
                rules={[{ required: true, message: '文章描述不能为空' }]}
              >
                <Input placeholder="请填写文章描述" />
              </Form.Item>
            </div>

            <Form.Item
              name="content"
            >
              <div className="my-editer">
                <BraftEditor
                  style={{ width: '92%' }}
                  value={editorState}
                  onChange={this.handleEditorChange}
                  onSave={this.publishBlog}
                  placeholder="请编辑文章内容"
                />
              </div>
            </Form.Item>
          </div>
        </Form>
      </div >
    )
  }
}
export default withRouter(BlogPublish)
